/* GamePixer - Improved & Fixed style.css
   - Kept all original class names so HTML/JS continue to work
   - Added CSS variables, accessibility focus states, and bug fixes
   - Fixed keyframe typos and pulse animation
   - Made wrapper a proper flex layout and improved responsive behavior
*/
:root{
  --bg:#0e0e0e;
  --surface:#111111;
  --nav-bg:#1a1a1a;
  --accent:orange;
  --link:#00bfff;
  --glow: rgba(255,140,0,0.3);
  --muted:#555;
  --white:#ffffff;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;
}

body{
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
  background-color:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* wrapper: make the page use full height and stack content */
.wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Navbar */
nav{
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px; 
  background: #1a1a1a;
  box-shadow:0 4px 20px rgba(255, 140, 0, 0.3);
  z-index:1000;
}

.logo{
color: orange;
font-size: 1.9em;
font-weight: bold;
text-shadow: 0 0 10px orange}

.menu{
display:flex;
gap:20px;}

.menu a{
  text-decoration: none;
  color: #00bfff;
  padding:10px 16px;
  border:4px solid orange;
  border-radius:10px;
  transition: all .3s ease;
  box-shadow:0 0 10px orange, inset 0 0 5px #ff8000;
  font-weight:500;
}
.menu a:hover,
.menu a:focus{
  color: #00bfff;
  border-color: #00bfff;
  box-shadow:0 0 12px #00bfff, inset 0 0 5px #00bfff;
  transform: translateY(-3px);
}

/* focus visible for keyboard users */
.menu a: focus-visible{
outline:3px solid rgba(0,191,255,.18);
outline-offset:3px;}

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
background:transparent;
border:none;padding:6px
}

.hamburger span{
height:4px;
width:25px;
background: orange;
margin-bottom:5px;
border-radius:4px;
box-shadow:0 0 8px orange;
/*transition:transform .25s,opacity .25s}*/
transition: 0.3s;
}

/* Headings */
h1,h2{ 
text-align:center;
color:var(--white);
background:radial-gradient(circle,#1a1a1a,#0f0f0f);
text-shadow:0 0 5px var(--accent)
}
h1{font-size:2.5rem;
color:var(--accent);
padding:20px;
margin-bottom:15px
}
h2{font-size:2.0rem;padding:30px 20px;margin:20px 0}

/* Fade in utility */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Services */
.services-section{padding:80px 20px 60px;background-color:var(--surface);text-align:center}
.services-grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:40px}
.service-card{width:340px;background:linear-gradient(145deg,#1e1e1e,#0c0c0c);padding:20px;border-radius:16px;box-shadow:0 0 15px rgba(255,140,0,.2);transition:transform .3s,box-shadow .3s}
.service-card:hover{transform:translateY(-8px);box-shadow:0 0 20px rgba(255,140,0,.4)}
.service-card img{width:100%;border-radius:12px;margin-bottom:15px;display:block;object-fit:cover}
.service-card h3{font-size:1.3rem;color:var(--white)}

.services-btn-wrapper
{
margin-top:40px;
}
.services-btn{display:inline-block;text-decoration:none;color:var(--link);padding:10px 20px;border:3px solid var(--accent);border-radius:10px;font-weight:500;background-color:var(--nav-bg);box-shadow:0 0 10px var(--accent), inset 0 0 5px #ff8000;transition:all .25s ease}
.services-btn:hover,.services-btn:focus{color:var(--link);border-color:var(--link);box-shadow:0 0 12px var(--link), inset 0 0 5px var(--link);transform:translateY(-3px)}
.services-btn:focus-visible{outline:3px solid rgba(0,191,255,.18);outline-offset:3px}


/* ===== Slider Styling ===== */
.slider {
  position: relative;
  max-width: 100%;
  height: 600px;
  overflow: hidden;
  margin: 30px auto;
  border-radius: 10px;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  background-color: #000;
}

.slide.active {
  opacity: 1;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .slide {
    object-fit: contain;
  }
}



/* nav arrows */
.prev,.next,.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:2.2rem;color:var(--white);cursor:pointer;user-select:none;padding:6px 12px;z-index:10;background:rgba(0,0,0,.25);border-radius:8px;border:none}
.prev{left:10px}.next{right:10px}
.prev:focus-visible,.next:focus-visible{outline:3px solid rgba(0,191,255,.18)}

/* dots */
.dots,.slider-dots{text-align:center;position:absolute;bottom:8px;width:100%;z-index:20}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background-color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
  border: none; /* remove default button border */
  padding: 0; /* remove default button padding */
  appearance: none; /* remove native button chrome */
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 0;
  vertical-align: middle;
}

.dot:hover {
  background-color: var(--link);
  transform: scale(1.15);
}

.dot:focus-visible {
  outline: 3px solid rgba(0,191,255,.18);
  outline-offset: 3px;
}

.dot.active {
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.dot:hover{background-color:var(--link);transform:scale(1.15)}
.dot.active{background-color:var(--accent);box-shadow:0 0 8px var(--accent)}

.work-desc{font-size:1rem;padding:0 1rem;text-align:center;margin:0 auto;max-width:700px;line-height:1.6;word-wrap:break-word}


/* ==== Client Logos Slider ==== */
.client-logos-section {
  background: #111; /* dark background for contrast */
  padding: 40px 0;
  overflow: hidden;
}

.client-logos-section .section-heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #fff;
}

.logo-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.logo-slide-track {
  display: flex;
  gap: 50px;
  animation: scroll 25s linear infinite;
  align-items: center;
}

.logo-slide-track img {
  height: 150px;
  width: auto;
  
  transition: filter 0.3s ease;
}


@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .logo-slide-track {
    gap: 30px;
    animation: scroll 15s linear infinite;
  }
  .logo-slide-track img {
    height: 90px;
  }
}







/* Scroll to top */
#scrollToTop{position:fixed;bottom:24px;right:24px;width:45px;height:45px;z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.3s ease,transform 0.3s ease;border-radius:50%;background:transparent;border:none}
#scrollToTop.visible
{
opacity:1;
pointer-events:auto;
animation:pulse 2.5s infinite;
}
#scrollToTop svg{
width:100%;
height:100%;
transform:rotate(-90deg);
filter:drop-shadow(0 0 8px #98FF98);
border-radius:50%;
}

@keyframes pulse{
  0%{
     transform:scale(1);
     filter:drop-shadow(0 0 8px #98FF98)
}
  50%{
     transform:scale(1.1);
     filter:drop-shadow(0 0 12px #98FF98)
}
  100%{
     transform:scale(1);
     filter:drop-shadow(0 0 8px #98FF98)
}
}

@media (max-width:480px){
  #scrollToTop{width:48px;height:48px;bottom:16px;right:16px}
  #scrollToTop svg{filter:drop-shadow(0 0 6px var(--accent))}
}







/* Footer */
.footer{background:linear-gradient(145deg,#1f1f1f,#0c0c0c);padding:40px 20px;display:flex;flex-direction:column;align-items:center;box-shadow:0 -8px 20px rgba(255,140,0,.2)}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.footer-links a{color:var(--accent);text-decoration:none;font-weight:700;transition:.3s}
.footer-links a:hover{color:#00aaff}

.social-icons{display:flex;gap:20px}
.icon{width:30px;height:30px;background-size:cover;transition:transform .25s}
.icon:hover{transform:scale(1.2)}

.linkedin{background-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/linkedin.svg');filter:invert(66%) sepia(68%) saturate(654%) hue-rotate(180deg)}
.discord{background-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/discord.svg');filter:invert(66%) sepia(100%) saturate(600%) hue-rotate(220deg)}
.instagram{background-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');filter:invert(57%) sepia(77%) saturate(600%) hue-rotate(330deg)}
.youtube{background-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg');filter:invert(54%) sepia(100%) saturate(500%) hue-rotate(350deg)}

/* Responsive / mobile menu */
@media (max-width:768px){
  .menu{position:absolute;top:70px;right:30px;background-color:var(--nav-bg);flex-direction:column;width:220px;border-radius:10px;display:none;padding:15px;box-shadow:0 0 15px var(--accent)}
  .menu a{margin-bottom:10px}
  .menu.active{display:flex}
  .hamburger{display:flex}
}

/* Utility: screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Small accessibility helpers for interactive elements */
button, a{cursor:pointer}
button:focus-visible{outline:3px solid rgba(0,191,255,.18);outline-offset:3px}

/* End of file */
/* --- Responsive tweaks appended: ensure slider is responsive, prevent nav overlap, and improve touch targets --- */

/* Prevent fixed nav from covering content: default padding (override with JS for exact height) */
body {
  padding-top: 72px; /* adjust if your nav height is different */
}

/* Responsive slider: use viewport-based height and aspect-ratio when supported */
.slider {
  width: 100%;
  max-width: 1200px;
  margin: 30px auto;
  border-radius: 10px;
  overflow: hidden;
  height: min(60vh, 600px);
  aspect-ratio: 16 / 9; /* modern browsers will respect this */
}

/* Ensure video and images always fill slider container */
.slide img,
.slide video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* use 'contain' if you prefer whole-frame visible */
  display: block;
}

/* Increase hit area for dots without changing visual size */
.dot {
  position: relative; /* ensure pseudo-element positioned correctly */
}

.dot::after {
  content: "";
  position: absolute;
  inset: -10px; /* expands the clickable area by ~20px in each dimension */
  cursor: pointer;
  display: block;
}

/* Make visual dots slightly larger on touch devices */
@media (pointer: coarse) {
  .dot {
    width: 18px;
    height: 18px;
  }
}

/* Slightly reduce service card width on very small screens */
@media (max-width: 360px) {
  .service-card { width: 280px; }
  body { padding-top: 64px; }
}

/* end of appended responsive tweaks */

/* Utility: screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Small accessibility helpers for interactive elements */
button, a{cursor:pointer}
button:focus-visible{outline:3px solid rgba(0,191,255,.18);outline-offset:3px}

/* End of file */